<template>
    <van-popup class="z-popup" v-model:show="visible" round position="bottom" :style="popupStyle">
        <div class="heading">
            <div class="close" @click="handleCancel">取消</div>
            <div class="title">金币</div>
            <div class="submit" @click="handleSubmit"> 确认</div>
        </div>
        <div class="divider"></div>
        <div class="content">
            <div class="row-1">
                <div class="color-CCCCCC">可用金币: <span class="color-FFAA00">￥{{ memberData.currentCoins }}</span></div>
                <!-- <div class="use-rule">使用规则</div> -->
            </div>
            <div class="row-2">
                <van-radio-group class="radio-group" v-model="checked">
                    <van-radio class="radio" :name="true" style="margin-bottom: 20px;">
                        使用金币（可抵扣：￥{{ coinsTotal }}）
                        <template #icon="props">
                            <img :src="checked ? v_radio_checked : v_radio_check" />
                        </template>
                    </van-radio>
                    <van-radio class="radio" :name="false">
                        不使用
                        <template #icon="props">
                            <img :src="!checked ? v_radio_checked : v_radio_check" />
                        </template>
                    </van-radio>
                </van-radio-group>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import v_radio_check from '@/assets/svg/common/v_radio_check.svg'
import v_radio_checked from '@/assets/svg/common/v_radio_checked.svg'
import { showToast } from 'vant';
import Api from '@/api'

const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
    memberData: {
        type: Object,
        required: false,
    },
    coinsTotal: {
        type: Number,
        required: false,
    },
})
const visible = toRef(props, 'visible')
const memberData = toRef(props, 'memberData')
const coinsTotal = toRef(props, 'coinsTotal')

const popupStyle = {
    background: '#45454D',
    height: '300px'
    // borderRadius: '8px'
};

const checked = ref(true)


// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
let loading = ref(false)
const handleSubmit = (params) => {
    if (checked.value && memberData.value.currentCoins <= 0) return showToast('可用金币不足')
    if(memberData.value.currentCoins < coinsTotal.value){
        if(checked.value){
            emit('emitSubmit', { checked: 'bugo' })
        }else{
            emit('emitSubmit', { checked: checked.value })
        }
    }else{
        emit('emitSubmit', { checked: checked.value })
    }
   
    return
    let data = {
        mobile: vip.value.mobile,
    }
    loading.value = true
    Api.Common.AppObjProcess.Do({ "functionName": "MemberLogoff", "contentData": data })
        .then(res => {
            console.log('注销 res :>> ', res);
            loading.value = false
            ElNotification({
                title: '提示',
                message: '注销成功',
                type: 'success',
            })
            emit('emitSubmit', 'cancel')
        })
        .catch(() => {
            loading.value = false
        })
}
</script>

<style scoped lang="scss">
.z-popup {
    .heading {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .close {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #999999;
        }

        .submit {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFAA00;
        }

        .title {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FEFEFE;
        }
    }

    .divider {
        height: 1px;
        background: #505059;
    }

    .content {
        .row-1 {
            display: flex;
            justify-content: space-between;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 16px;
            padding: 14px 12px;

            .use-rule {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #999999;
            }
        }

        .row-2 {
            padding: 15px 33px;

            .radio-group {

                ::v-deep {
                    img {
                        width: 16px;
                        height: 16px;
                    }

                    .van-radio__label {
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 16px;
                        color: #FFFFFF;
                    }

                    .van-radio__icon {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}

.color-FFAA00 {
    color: #FFAA00;
}

.color-CCCCCC {
    color: #CCCCCC;
}
</style>
